// deprecated
<template>
  <SysDialog
    ref="dialogRef"
    @onSubmit="onSubmit"
    @onClose="onClose"
  >
    <template #content>
      <el-form
        ref="formRef"
        :model="form.data"
        style="max-width: 68%;margin: 0 auto;"
        label-width="auto"
      >
        <el-form-item
          v-for="(field, index) in formFields"
          :label="field.label + ':'"
          :prop="field.prop"
          :rules="field.rules"
        >
          <el-input
            v-if="field.type === 'text' || field.type === undefined"
            v-model="form.data[field.prop]"
            :placeholder="field.placeholder ? field.placeholder : field.label"
            :type="field.isPwd ? 'password' : 'text'"
            :show-password="field.isPwd"
            clearable
          />
          <el-radio-group
            v-else-if="field.type === 'radio'"
            v-model="form.data[field.prop]"
          >
            <el-radio
              v-for="opt in field.options"
              :value="opt.value"
            >
              {{ opt.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </template>
  </SysDialog>
</template>

<script lang="ts" setup>
const formFields = [
  {
    label: '用户名称',
    prop: 'name',
    type: 'text',
    placeholder: '可作为登录账号',
    rules: [{ required: true, message: '请输入用户名称', trigger: 'blur' }]
  },
  {
    label: '电子邮箱',
    prop: 'email',
    placeholder: '可作为登录账号',
    rules: [{ required: true, message: '请输入电子邮箱', trigger: 'blur' }]

  },
  {
    label: '性别',
    prop: 'gender',
    type: 'radio',
    rules: [{ required: true, message: '请选择性别', trigger: 'blur' }],
    options: [
      { label: '男', value: '1' },
      { label: '女', value: '2' }
    ]
  },
  {
    label: '手机号码',
    prop: 'phone',
    placeholder: '可作为登录账号',
    rules: [{ required: true, message: '请输入手机号码', trigger: 'blur' }]
  },
  {
    label: '密码',
    prop: 'password',
    isPwd: true,
    rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
  },
  {
    label: '确认密码',
    prop: 'confirmPassword',
    isPwd: true,
    rules: [
      { required: true, message: '请输入确认密码', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          value !== form.data.password ? callback(new Error('两次输入密码不一致')) : callback()
        },
        trigger: 'blur'
      }
    ]
  }
]

import { FormMode } from '@/common/type/baseEnum'
import type { UserData } from '@/common/type/data'
import SysDialog from '@/components/SysDialog.vue'
import Logger from '@/util/log'
import { nextTick, reactive, ref } from 'vue'

const dialogRef = ref()
const formRef = ref()
const form = reactive(
  {
    data: {} as UserData,
    mode: FormMode.Add
  }
)

const open = (m: FormMode, data: UserData) => {
  form.mode = m
  if (data) {
    // note: 这里的nextTick是为了保证表单数据填充的正确性
    nextTick(() => {
      Object.assign(form.data, data)
    })
  }
  dialogRef.value?.open(m)
}

const onSubmit = () => {
  Logger.prettyInfo('submit start!', form.data)
  formRef.value?.validate(async (valid: boolean, fields: any) => {
    if (valid) {
      // 提交表单数据
      console.log('表单数据有效，提交表单数据')
      dialogRef.value?.close()
    } else {
      console.log('error submit!!', fields)
    }
  })
}

const onClose = () => {
  console.log('onClose')
  formRef.value?.resetFields()
}

defineExpose({
  open
})

</script>